import { defineStore } from "pinia";
import { $themeBreakpoints } from "@CORE/app-config/config";
import { $themeConfig } from "@/@CORE/app-config";

export const appStore = defineStore({
	id: "app",
	state: () => ({
		// 窗口宽度
		windowWidth: 0,
		// element组件大小 small | medium | mini
		assemblySize: "default",
		...$themeConfig
	}),
	actions: {
		updateWindowWidth(windowWidth) {
			this.windowWidth = windowWidth;
		},
		UPDATE_LAYOUT_TYPE(layoutType) {
			this.appConfig.layout.layoutType = layoutType;
		},
		SET_COLLAPSE(isCollapse) {
			this.layout.isCollapse = isCollapse;
		}
	},
	getters: {
		currentBreakPoint: state => {
			const { windowWidth } = state;
			if (windowWidth >= $themeBreakpoints.xl) return "xl";
			if (windowWidth >= $themeBreakpoints.lg) return "lg";
			if (windowWidth >= $themeBreakpoints.md) return "md";
			if (windowWidth >= $themeBreakpoints.sm) return "sm";
			return "xs";
		}
	}
});
